<template>
  <div>
    <div class="listContainer">
      <dl class="dlCon">
        <dt class="search-title">行业：</dt>
        <dd style="overflow:visible;float:left;">
          <ul class="list">
            <li class="item" :class="{'itemSelect':first}" @mouseover="mouseOver(1)" @mouseout="mouseOut(1)">
              <span>互联网电商</span>
              <div class="itemDetail" :class="{itemShow:first}">
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
                <span>五金</span>
              </div>
            </li>
            <li class="item" :class="{'itemSelect':second}" @mouseover="mouseOver(2)" @mouseout="mouseOut(2)">
              <span>second</span>
              <div class="itemDetail" :class="{itemShow:second}">
                <span>second</span>
              </div>
            </li>
            <li class="item" :class="{'itemSelect':third}" @mouseover="mouseOver(3)" @mouseout="mouseOut(3)">
              <span>third</span>
              <div class="itemDetail" :class="{itemShow:third}">
                <span>third</span>
              </div>
            </li>
            <li class="item" :class="{'itemSelect':fouth}" @mouseover="mouseOver(4)" @mouseout="mouseOut(4)">
              <span>fouth</span>
              <div class="itemDetail" :class="{itemShow:fouth}">
                <span>fouth</span>
              </div>
            </li>
          </ul>
        </dd>
      </dl>
    </div>
  </div>
</template>
<style scoped>
.search-title {
  float: left;
  margin: 10px -20px 6px 0;
  color: #999;
}

.dlCon {}

.dlCon::before {
  display: table;
  line-height: 0;
  content: "";
}

.dlCon::after {
  display: table;
  line-height: 0;
  content: "";
  clear: both;
}

.list {
  list-style: none;
  position: relative;
  width: 900px;
  height: 50px;
  margin: 0;
  padding: 0;
}

.listContainer {
  height: 50px;
  padding: 0;
  margin: 0;
}

.list::before {
  display: table;
  line-height: 0;
  content: "";
}

.list::after {
  content: '';
  display: table;
  line-height: 0;
  clear: both;
}

.item {
  float: left;
  padding: 0 13px;
  margin-top: 10px;
}

.itemSelect {
  background-color: red
}

.itemDetail {
  height: 50px;
  display: none;
  left: 0;
  right: 0;
  background-color: red;
  z-index: 1;
  position: absolute;
  background-color: #e9e9e9
}

.itemHidden {
  visibility: hidden;
}

.itemShow {
  display: block;
}
</style>
<script>
export default {
  data: function() {
    return {
      items: ['工程师', '建筑工人', '教师', '销售'],
      isShow: false,
      first: false,
      second: false,
      third: false,
      fouth: false
    }
  },
  methods: {
    mouseOver: function(arg) {
      console.log('mouseover')
      if (arg === 1) {
        this.first = true
      } else if (arg === 2) {
        this.second = true
      } else if (arg === 3) {
        this.third = true
      } else if (arg === 4) {
        this.fouth = true
      }
      this.isShow = true
    },
    mouseOut: function(arg) {
      console.log('mouseout')
      this.isShow = false
      if (arg === 1) {
        this.first = false
      } else if (arg === 2) {
        this.second = false
      } else if (arg === 3) {
        this.third = false
      } else if (arg === 4) {
        this.fouth = false
      }
    }
  }
}
</script>
